<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link type="text/css" rel="stylesheet" href="css/material-icons.css"/>
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
    <title>Create Storage Pool</title>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>
<body>
<div class="container">
  <div class="section">
    <div class="row">
      <div class="col m6 push-m2" id="main-panel">
        <div class="row">
          <div class="input-field col m6">
            <input type="text" id="pool-name" placeholder="Input storage pool name" class="validate">
            <label for="pool-name" id="name-label"></label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col m4">
              <select name="protocol" id="pool-protocol">
              </select>
              <label id="type-label"></label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col m7">
            <input type="text" id="pool-hostname" placeholder="host name or IP of storage server" class="validate">
            <label for="pool-hostname" id="host-label"></label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col m7">
            <input type="text" id="pool-target" placeholder="exported target path" class="validate">
            <label for="pool-target" id="target-label"></label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="divider"></div>
  <div class="section">
      <div class="row">
          <div class="col m2">
              <a class="waves-effect waves-light blue-grey lighten-2 btn" onclick="window.history.back()" id="back-caption"><i
                      class="material-icons left">chevron_left</i></a>
          </div>
          <div class="col m2 right" id="button">
              <button class="waves-effect waves-light blue-grey lighten-2 btn" onclick="createPool()" id="create-caption">
                  <i class="material-icons right">add</i>
              </button>
          </div>
      </div>
  </div>
</div>

<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/nano.js"></script>
<script>
N.ValidateSession();
var texts = N.GetTexts();
$('#back-caption').append(texts.get(N.TagBack));
$('#create-caption').prepend(texts.get(N.TagCreate));

$('#name-label').text(texts.get(N.TagName));
$('#type-label').text(texts.get(N.TagType));
$('#host-label').text(texts.get(N.TagHost));
$('#target-label').text(texts.get(N.TagTarget));

M.AutoInit();

function loadOptions(){
  var availableProtocols = ['nfs'];
  availableProtocols.forEach((protocol) => {
    $('#pool-protocol').append(
      $('<option>').attr('value', protocol).text(protocol)
    )
  });
  M.FormSelect.init($('#pool-protocol'));
}

var hostPattern = new RegExp('^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$|^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)+([A-Za-z]|[A-Za-z][A-Za-z0-9\-]*[A-Za-z0-9])$');
var pathPattern = new RegExp('^(/[^/ ]*)+/?$');

function createPool(){
  var poolName = $('#pool-name').val();
  var protocol = $('#pool-protocol').val();
  var poolHost = $('#pool-hostname').val();
  var poolTarget = $('#pool-target').val();
  if (!poolName){
    M.toast({html: "please input pool name"});
    return;
  }
  if (!hostPattern.test(poolHost)){
    M.toast({html: "invalid hostname"});
    return;
  }
  if (!pathPattern.test(poolTarget)){
    M.toast({html: "invalid target path"});
    return;
  }

  $('#button').empty();
  $('#main-panel').empty();

  var table = $('<table>').addClass('striped');
  table.append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagName))
    ).append(
      $('<td>').text(poolName)
    )
  ).append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagType))
    ).append(
      $('<td>').text(protocol)
    )
  ).append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagHost))
    ).append(
      $('<td>').text(poolHost)
    )
  ).append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagTarget))
    ).append(
      $('<td>').text(poolTarget)
    )
  ).append(
    $('<tr>').append(
      $('<td>').text(texts.get(N.TagResult))
    ).append(
      $('<td>').attr('id', 'request-result')
    )
  );
  $('#main-panel').append(table);
  var request = new Object();
  request.type = protocol;
  request.host = poolHost;
  request.target = poolTarget;

  $.post(
    '/storage_pools/'+ poolName,
    JSON.stringify(request),
    function(result){
      if (0 != result['error_code']) {
        $('#request-result').text(result['message']);
        return;
      }
      $('#request-result').text('success');
      $('#button').append(
        $('<a>').attr('href', 'storages.html').append(
          $('<button>').addClass('waves-effect waves-light blue-grey lighten-2 btn').text(texts.get(N.TagFinish)).prepend(
            $('<i>').addClass('material-icons').text('check')
          )
        )
      );
      N.WriteOperateLog('create new storage pool ' + poolName);
    },
    "json"
  );

}

$(function(){
  loadOptions();
});


</script>
</body>
</html>
